<script lang="ts" setup>
import { getCurrentInstance, reactive, ref } from 'vue'
import { onLoad, onPageScroll, onReady, onShow } from '@dcloudio/uni-app'
import TnListItem from '@tuniao/tnui-vue3-uniapp/components/list/src/list-item.vue'
import TnSwitch from '@tuniao/tnui-vue3-uniapp/components/switch/src/switch.vue'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import TnInput from '@tuniao/tnui-vue3-uniapp/components/input/src/input.vue'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import PageContainer from '@/components/page-container/index.vue'
import { useScrollTransparentNavbar } from '@/hooks'
import circles from '@/api/circles.js'
import { FILE_URL } from '@/api/config.js'

// 导航栏的高度
const navbarHeight = ref(0)
const instance = getCurrentInstance()
const state = reactive({
  circlesId: 0,
  plate: 'dynamic',
  switch: '',
  lists: [],
  addZonePopup: false,
  editZonePopup: false,
  zoneName: '',
  zoneId: 0,
  zoneStatus: '1',
  currentZoneStatus: '1',
})

const { init: initTransparentScroll, opacityScrollHandle } =
  useScrollTransparentNavbar(instance)

// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}

const plateStatus = () => {
  circles
    .plateStatus({
      circles_id: state.circlesId,
      plate: state.plate,
      switch: state.switch,
    })
    .then((res) => {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
    })
    .catch((err: any) => {
      console.log(err, 'plateStatus')
    })
}
const getCirclesZone = () => {
  circles
    .circlesZone({
      circles_id: state.circlesId,
      plate: state.plate,
      status: 'all',
    })
    .then((res) => {
      if (res.code == 1) {
        state.lists = res.data
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        })
      }
    })
    .catch((err: any) => {
      console.log(err, 'getCirclesZone')
    })
}

const clickAddZone = () => {
  state.zoneName = ''
  state.addZonePopup = true
}
const clickEditZone = (
  zoneName: string,
  zoneId: number,
  currentZoneStatus: string
) => {
  state.zoneName = zoneName
  state.zoneId = zoneId
  state.editZonePopup = true
  state.currentZoneStatus = currentZoneStatus
}
const addZoneName = () => {
  circles
    .circlesManageZone({
      circles_id: state.circlesId,
      name: state.zoneName,
      plate: state.plate,
    })
    .then((res) => {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
      if (res.code == 1) {
        state.zoneName = ''
        state.addZonePopup = false
        getCirclesZone()
      }
    })
    .catch((err: any) => {
      console.log(err, 'addZoneName')
    })
}
const editZoneName = () => {
  circles
    .circlesManageZone({
      circles_zone_id: state.zoneId,
      circles_id: state.circlesId,
      name: state.zoneName,
      plate: state.plate,
    })
    .then((res) => {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
      if (res.code == 1) {
        state.zoneName = ''
        state.editZonePopup = false
        getCirclesZone()
      }
    })
    .catch((err: any) => {
      console.log(err, 'editZoneName')
    })
}
const removeShelfZone = () => {
  circles
    .circlesManageZone({
      circles_zone_id: state.zoneId,
      circles_id: state.circlesId,
      status: '0',
    })
    .then((res) => {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
      if (res.code == 1) {
        state.zoneName = ''
        state.editZonePopup = false
        getCirclesZone()
      }
    })
    .catch((err: any) => {
      console.log(err, 'removeShelfZone')
    })
}
const shelvesZone = () => {
  circles
    .circlesManageZone({
      circles_zone_id: state.zoneId,
      circles_id: state.circlesId,
      status: '1',
    })
    .then((res) => {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
      if (res.code == 1) {
        state.zoneName = ''
        state.editZonePopup = false
        getCirclesZone()
      }
    })
    .catch((err: any) => {
      console.log(err, 'removeShelfZone')
    })
}
const clickZoneweight = () => {
  tnNavPage(
    `/circlesPages/manage/zoneweight?circlesId=${state.circlesId}&plate=${state.plate}`
  )
}
onLoad((options) => {
  if (!options?.circlesId) {
    uni.showModal({
      title: '提示',
      content: '参数错误',
      showCancel: false,
      success: () => {
        uni.navigateBack()
      },
    })
    return
  }
  state.circlesId = options.circlesId
  state.plate = options.plate
  state.switch = options.switch
})
onShow(() => {
  getCirclesZone()
})
onReady(() => {
  initTransparentScroll()
})
onPageScroll((e) => {
  opacityScrollHandle(e.scrollTop)
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    >
      板块管理
    </TnNavbar>
    <view class="container">
      <view class="tn-mt-sm" :style="{ paddingTop: `${navbarHeight}px` }">
        <view class="status">
          <view class="left">
            <text v-if="state.plate == 'dynamic'">动态板块状态</text>
            <text v-else-if="state.plate == 'usedIdle'">闲置板块状态</text>
            <text v-else-if="state.plate == 'organizeBureau'">
              组局板块状态
            </text>
          </view>
          <view class="right">
            <TnSwitch
              v-model="state.switch"
              inactive-value="close"
              active-value="open"
              @change="plateStatus"
            />
          </view>
        </view>
        <view class="tn-mt">
          <view class="tn-flex tn-flex-row">
            <view class="title" style="flex: 1">
              分区管理
              <text class="tn-text-xs" style="color: #9c9c9c">(最多10个)</text>
            </view>
            <view
              class="tn-text-right"
              style="flex: 1; color: #78909c"
              @click="clickZoneweight"
            >
              <TnIcon name="menu-sorts" /> 排序
            </view>
          </view>

          <view class="list-item tn-mb">
            <TnListItem
              v-for="(item, index) in state.lists"
              :key="index"
              right-icon=""
              :custom-style="{
                borderRadius: '15rpx',
                marginTop: '20rpx',
              }"
            >
              <view class="list-content">
                <view class="text">
                  {{ item.name }}
                  <text v-if="item.status == '0'" class="tn-text-xs tn-ml-sm">
                    （已下架）
                  </text>
                </view>
                <view
                  class="tn-text-xs sub-text"
                  @click="clickEditZone(item.name, item.id, item.status)"
                >
                  <TnIcon name="edit-write" size="30" />
                </view>
              </view>
            </TnListItem>
          </view>
          <TnButton
            v-if="state.lists.length < 10"
            type="primary"
            shape="round"
            width="100%"
            height="70"
            @click="clickAddZone"
          >
            新增分区
          </TnButton>
        </view>
      </view>
      <view class="tn-tabbar-height" />
    </view>
    <!-- 新增分区 -->
    <TnPopup
      v-model="state.addZonePopup"
      :close-btn="true"
      width="90%"
      height="350"
    >
      <view class="tn-p tn-text-center tn-text-lg"> 新增分区 </view>
      <view class="tn-pl tn-pr">
        <TnInput
          v-model="state.zoneName"
          :underline="true"
          :maxlength="30"
          placeholder="请填写分区名称"
        />
      </view>
      <view class="tn-pt-xl tn-text-center">
        <TnButton width="90%" height="70" size="lg" @click="addZoneName">
          保 存
        </TnButton>
      </view>
    </TnPopup>
    <!-- 编辑分区 -->
    <TnPopup
      v-model="state.editZonePopup"
      :close-btn="true"
      width="90%"
      height="350"
    >
      <view class="tn-p tn-text-center tn-text-lg"> 编辑分区 </view>
      <view class="tn-pl tn-pr">
        <TnInput
          v-model="state.zoneName"
          :underline="true"
          :maxlength="30"
          placeholder="请填写分区名称"
        />
      </view>
      <view class="tn-pt-xl tn-text-center tn-flex tn-flex-row">
        <view class="" style="flex: 1">
          <TnButton
            v-if="state.currentZoneStatus == 0"
            type="success"
            width="80%"
            height="70"
            size="lg"
            @click="shelvesZone"
          >
            上 架
          </TnButton>
          <TnButton
            v-else-if="state.currentZoneStatus == 1"
            type="warning"
            width="80%"
            height="70"
            size="lg"
            @click="removeShelfZone"
          >
            下 架
          </TnButton>
        </view>
        <view class="" style="flex: 1">
          <TnButton width="80%" height="70" size="lg" @click="editZoneName">
            保 存
          </TnButton>
        </view>
      </view>
    </TnPopup>
  </PageContainer>
</template>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f8f7f8;
  padding: 0 30rpx;

  .status {
    margin: 30rpx 0;
    background-color: var(--tn-color-white);
    color: var(--tn-text-color-primary);
    border-radius: 15rpx;
    overflow: hidden;
    flex: 1;
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;

    .left {
      flex: 1;
      font-weight: bold;
    }

    .right {
      width: 100rpx;
      height: 24px;
    }
  }

  .title {
    margin-bottom: 30rpx;
  }

  .list-item {
    position: relative;
    width: 100%;

    .list-content {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      line-height: 1;

      .text {
        flex: 1;
        text-align: left;
      }
      .sub-text {
        margin-left: auto;
        text-align: right;
        color: #9c9c9c;
      }
    }
  }
}
</style>
